<template>
  <view>
    <view style="width: 100%;" :style="{height: wh + 120 + 'px'}">
      <!-- 整个box -->
      <view class="box">
        <!--  公告信息 -->
        <view class="box2">
          <view style="font-size: large;font-weight: bold;color: #6A6A6A;">公告信息</view>
          <view style="border-bottom: 2rpx solid #c1c1c0;">
            <view class="text">公告标题：</view>
            <view class="input"><input type="text" name="title" v-model="title" placeholder="请输入公告标题" /></view>
          </view>
          <view style="border-bottom: 2rpx solid #c1c1c0;">
            <view class="text">公告副标题：</view>
            <view class="input"><input type="text" name="subtitle" v-model="subtitle" placeholder="请输入公告副标题" /></view>
          </view>
          <view style="border-bottom: 2rpx solid #c1c1c0;">
            <view class="text">公告详情：</view>
            <view style="width: 430rpx;">
              <u--textarea style="width: 430rpx;" v-model="detail" placeholder="请输入公告详情" count maxlength="150"
                autoHeight border="bottom"></u--textarea>
            </view>
          </view>
          <view>
            <view class="text">公告图片：</view>
            <view>
              <u-upload :fileList="fileList3" @afterRead="afterRead"  @delete="deletePic" name="3" multiple
                :maxCount="3"></u-upload>
            </view>
          </view>
        </view>
        <view @click="btnadd" class="submit" style="">新增</view>
      </view>
    </view>
  </view>
</template>

<script>
  //获取应用实例
  const app = getApp()
  export default {
    data() {
      return {
        title: '', //公告标题
        subtitle:'',//副标题
        detail: '', //公告详细信息
        fileList3: [],
      };
    },
    methods: {
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
        console.log(event.name)
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < lists.length; i++) {
          const result = await this.uploadFilePromise(lists[i].url)
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      async uploadFilePromise(url) {
        console.log("url==============================>>>>>>>>>>")
        console.log(url)
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: app.globalData.baseUrl+'/qiniu/testUpload', // Spring Boot接口地址
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              setTimeout(() => {
                resolve(res.data)
              }, 1000)
            }
          });
        })
      },
      // 新增公告  按钮单击事件
      async btnadd(){
        if(this.title==='' || this.subtitle==='' || this.detail==='' || this.fileList3.length===0){
          return uni.$showMsg("标题、副标题、详情、图片不能为空")
        }
        var notice={};
        notice.title=this.title;
        notice.subTitle=this.subtitle;
        notice.content=this.detail;
        var imgstr='';
        for(var i=0;i<this.fileList3.length;i++){
          imgstr+=this.fileList3[i].url+';'//多个url之间用 ; 分割
        }
        notice.img=imgstr;
        notice.time=uni.$getDateTime(new Date());
        const {data: res} = await uni.$http.put('/notice/addnotice',notice)
        if (res.status !== 200) return uni.$showMsg("新增失败")
        else{
          uni.$showMsg("新增成功")
          setTimeout(()=>{
            uni.navigateTo({
            	url: '/pages/admin-page/admin-page'
            });
          },1000)
        }
      }
    }
  }
</script>

<style lang="scss">
  .box {
    padding: 30rpx;
  }

  .box1,
  .box2 {
    // border-radius: 30rpx;
    margin-bottom: 30rpx;
    padding: 25rpx;
    box-shadow: 0 0 15rpx #999999
  }

  .box1>view,
  .box2>view {
    padding: 10rpx;
    display: flex;
    margin-bottom: 10rpx;
    font-family: Microsoft YaHei;

    color: #333333;
  }

  .text {
    width: 30%;
    text-align: left;
    overflow: auto;
  }


  .submit {
    background-color: #1599FD;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    border-radius: 15rpx;
    line-height: 100rpx;
    height: 100rpx;
  }
</style>
